
// 引入vant-UI组件库的 dialog弹出框 组件
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';

// 首页API
import {getSearchRecommend,getSearchResultList} from '../../../api/mainApi'

Page({
  /**
   * 组件的属性列表,父组件传入的数据
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    top: getApp().menuCapsulePosition.top, //胶囊按钮和屏幕顶部的距离
    resultListHeight:0,    // 搜索结果列表的高度
    showCancelSearch:false,   // 在搜索框右侧显示取消按钮
    inputContent: '',    //输入框输入的内容 
    isSerached:false,   //标识是否以搜索的字段
    searchHistory:[],   // 搜索记录列表
    hostSearchList:[],  // 搜索推荐列表
    searchResultList:[],  //搜索到的结果列表,
    pageNum:0,  // 搜索商品结果的页码
    hasNextPage:true  // 是否还有下一页
  },

  onLoad:function(option){
      // 初始化搜索历史记录
      this.initialSearchHistory()
      // 请求搜索推荐列表
      // this.initialHotSearchList()
      // 初始化搜索结果列表的高度
      this.initialResultListHeight()
      let t = this
      const eventChannel =  this.getOpenerEventChannel()
      // 接收来自main页面传递的数据：推荐搜索列表
      eventChannel.on('acceptDataFromMainPage',function(data){
        t.setData({
          hostSearchList:data.hostSearchList
        })
      })
    },

    // ------ 初始化搜索结果的高度 -----
    initialResultListHeight(){
      wx.getSystemInfo({
        success: (result) => {
         let windowHeight =  result.windowHeight
         this.setData({
           resultListHeight:windowHeight - this.data.top -45 -50
         })
        }
      })
    },

    // ----- 初始化历史搜索记录：从本地缓存中获取 -----
    initialSearchHistory(){
      // 获取存储在本地缓存中的历史搜索记录
      let searchHistory =  wx.getStorageSync('searchHistory')
      !searchHistory ? searchHistory = [] : ''
      this.setData({ searchHistory:searchHistory })
      console.log("从本地缓存中取出历史搜索记录：",searchHistory);
    },

    // ------ 初始化搜索推荐列表：从服务端获取 --------
    // initialHotSearchList(){
    //   getSearchRecommend().then(res=>{
    //     this.setData({
    //       hostSearchList:res.searchRecomment
    //     })
    //   })
    // },

    // --------- 处理点击返回按钮 ---------
    handleClickBack() {
      console.log("点记录返回按钮,将要返回到上一页");
      wx.navigateBack({
        delta: 1,
      })
    },

    // ------ 将data中数据与搜索框进行绑定 -----
    bindInputContent(e){
      console.log("输入的内容是：",e.detail);
      this.setData({ inputContent:e.detail })
    },
    
    // ------- 处理点击搜索按钮事件 ------- 
    handleClickSearch(e){
      console.log("点击了搜索按钮");
      // 搜索框输入内容
      let inputContent = this.data.inputContent 
      // 历史搜索记录
      let searchHistory = this.data.searchHistory
      // 搜索框内容是否存在
      if(inputContent){
        // 如果搜索记录中存在当前要搜索的内容，就从记录中删除
        searchHistory.forEach((item,index)=>{
          item === inputContent ? searchHistory.splice(index, 1) : ''
        })
        // 将本次搜索内容存入记录列表的头部
        searchHistory.unshift(inputContent)
        // 将搜索记录列表缓存到本地
        wx.setStorage({ data: searchHistory, key: 'searchHistory' })
        // 更新搜索记录中的数据，使得页面动态渲染
        this.setData({inputContent , searchHistory })
      }else{
        // 当用户点击搜索时，如果没有输入搜索内容，将会从推荐列表中取出一个商品名称进行搜索
        this.setData({ inputContent:this.data.hostSearchList[0] })
      }
      // 搜索商品
      this.searchGoods()
      // 在搜索框的右侧显示取消按钮
      this.setData({ showCancelSearch:true })
    },

    // ------- 搜索商品 ------
    searchGoods(){
      getSearchResultList(this.data.pageNum,15,this.data.inputContent)
      .then(data=>{
        // 如果不是第一页，那就将新数据与旧数据合并
        if(this.data.pageNum >0){
          data.commodity_list.unshift(...this.data.searchResultList)
        }
        this.setData({
          searchResultList:data.commodity_list,
          pageNum:this.data.pageNum+1,
          hasNextPage:data.isnext
        })
       })
    },

    // ------- 重置搜索结果，点击取消按钮或者搜索框获得焦点都会执行该函数 -------
    resetResult(){
      this.setData({
        showCancelSearch:false,
        searchResultList:[],
        pageNum:0
      })
    },

    // ------- 处理搜索结果列表滚动条滚动至底部事件 ----------
    handleRollToLower(){
      if(this.data.hasNextPage){
        this.searchGoods()
      }else{
        wx.showToast({
          title: '已经到底了！',
        })
      }
    },

    // ------ 处理清空搜索记录 事件 -----
    handleClearHistory(){
      Dialog.confirm({
        context:this, 
        title: '提示',
        message: '您确定要删除所有搜索记录吗？',
      }).then(()=>{
        wx.removeStorageSync('searchHistory') // 删除本地缓存的历史搜索记录
        this.setData({ searchHistory:[] }) // 删除页面展示的搜索历史记录
      }).catch(()=>'')
    },

    // ----- 处理点击推荐、历史商品标签，进行搜索 事件  -----
    handleDirectSearch(e){
        console.log("处理直接搜索,在点击历史搜索和搜索推荐项时触发......");
        console.log("携带的数据:",e.currentTarget.dataset.item);
        //改变搜索框的内容
        this.setData({
          inputContent:e.currentTarget.dataset.item,
        })
        // 将本次点击的商品标签作为搜索内容进行搜索
        this.handleClickSearch()
    },

})